<template>
  <el-config-provider :locale="locale">
		<div v-if="!showMain" class="page-loading">正在加载....</div>
		<div v-else-if="isOperationPage" class="page-subpage">
			<router-view name="subpage"></router-view>
			<!-- 个性化设置 -->
			<user-setting />
		</div>
		<router-view v-else-if="$route.path === '/login'"></router-view>
		<div v-else :class="['page-all', onlyShowMain ? 'only-main-page' : '']">
			<div v-if="!onlyShowMain" class="app-header">
				<top-nav></top-nav>
			</div>
			<div :class="['main']">
				<!-- <div width="200px" class="left-nav">左侧栏</div> -->
				<side-nav v-if="!onlyShowMain">左侧栏</side-nav>
				<div class="content">
					<div class="csl-watermark"></div>
					<router-view />
				</div>
			</div>
			<div v-if="!onlyShowMain" class="footer">————世林出品</div>
			<!-- 个性化设置 -->
			<user-setting />
		</div>
	</el-config-provider>
</template>
<script>
import { mapState } from 'vuex'
// import initAxios from './assets/js/axios'
import topNav from '@/components/topNav'
import sideNav from '@/components/sideNav'
import userSetting from '@/components/user-setting'
import zhCn from './utils/zh-cn.mjs'
import changeMode from './utils/changeMode'
export default {
  name: 'App',
  components: {
    topNav,
    sideNav,
    userSetting
  },
  data() {
    return {
      showMain: false
    }
  },
  computed: {
    ...mapState(['isOperationPage', 'onlyShowMain']),
		locale() {
			return zhCn
		},
		currentMode() { // 1: 默认模式 2: 暗黑模式 3: 哀悼
			return this.$store.state.setting.currentMode
		},
		themeColor() {
			return this.$store.state.setting.themeColor
		}
  },
	watch: {
    currentMode() {
      changeMode(this.currentMode, this.themeColor)
    }
  },
  created() {
    // window.axios = initAxios(this)
    // window.VM = this
    // eslint-disable-next-line no-unused-vars
    this.$router.beforeEach((to, from, next) => {
      // console.log(to, from, next)
      let pathArr = to.path.split('/')
      if (pathArr[1] == 'subpage') {
        //编辑操作页 -- 需要单独新开一个完整页面
        this.$nextTick(() => {
          this.$store.commit('setIsOperationPage', { isOperationPage: true })
        })
      } else {
        this.$nextTick(() => {
          this.$store.commit('setIsOperationPage', { isOperationPage: false })
        })
      }
      next()
    })
  },
  mounted() {
    setTimeout(() => {
      this.showMain = true
			// console.log('App-$NOWTIME----', this.$NOWTIME()) // Test  vue2 的 Vue.prototype
    }, 500)
    const isMobile = /iPhone|iPad|iPod|Android|Harmony/i.test(navigator.userAgent) // 手机端
    // eslint-disable-next-line no-unused-vars
    const canUseZoom = !isMobile && !/Firefox|KaiOS|Opera/i.test(navigator.userAgent) // 能使用 zoom 的浏览器
    // this.getScaleListener(canUseZoom)
  },
  methods: {
		/**
		 * 各分辨率适配、缩放适配;
		 * 需求要求: 需要支持缩放功能(缩放后 页面各元素模块正常展示)、 需要适配各种分辨率(初始加载不应出现横向滚动条)
		 * 问题/解决方案记录:
		 *    1、部分模块使用了flex布局 会自动伸缩 进而导致内容显示不全的问题;(换用 inline-block 或 flex: 0 0 auto;)
		 *    2、justify-center 弹性布局的水平居中 会出现左右两侧显示不全且滚动条也滚动不过去的问题;(换用 margin: 0 auto;)
		 *    3、部分页面内容高度设计的不是那么规范, 内容高度会随接口请求完后增加(这会导致 初始加载页面执行分辨率适配逻辑时页面内容高度较小 无纵向滚动条,
		 *       而内容页面业务请求完后重新渲染 高度增加又有了纵向滚动条，后出现的纵向滚动条增加了横向宽度，进而导致后又出现了多余的横向滚动条)
		 *       (
		 *        解决方案1: 右侧使用padding留一个滚动条的宽度;(弊端: 没有纵向滚动条的页面，右侧会有一部分padding空白 有点突兀)
		 *        解决方案2: 默认添加纵向滚动条;(弊端:默认有纵向滚动条)(目前使用这种)
		 *        解决方案3: 改业务页面, 3.1: 业务页面内部加滚动条; 3.2: 业务页面异步重新渲染后再主动重新调全局页面适配函数; 这个是完美解决方案;(弊端:工作量大一些,有问题的页面逐一去改;)
		 *       )
		 *    4、设置了100%或100vh, 但缩放后页面无法铺满屏幕高度, 原因是100vh缩放小就铺不满屏幕了;(设置最小页面高度: min-height: ${100 / scale}vh; scale为当前缩放比例)
		 *    5、使用 transform 手动缩放后 页面缩小后没有居中;(absolute定位结合translateX居中)
		 */
		getScaleListener(canUseZoom) {
			const devicewidth = document.documentElement.clientWidth
      const deviceheight = document.documentElement.clientHeight
			const scaleX = devicewidth / 1920
			const scaleY = deviceheight / 919
      const scale = Math.min(scaleX, scaleY)
			document.body.style.setProperty(`--zoom`, scale)
			let myStyle = document.createElement('STYLE')
			const minHeight = 100 / scale
			let styleTextNode = document.createTextNode(`
				#app {
					width: 1920px;
					margin: 0 auto;
					box-sizing: border-box;
					${canUseZoom ? `
						zoom: var(--zoom)
						` : `
						position: absolute;
						left: 50%;
						transform: scale(var(--zoom)) translateX(-50%);
						transform-origin: 0 0;
					`}
				}
				${canUseZoom ? `
					.el-tooltip__popper, .el-popper {
						zoom: var(--zoom);
					}
					` :
					`.el-tooltip__popper, .el-popper {
						transform: scale(var(--zoom));
					}`
				}
				#app, .layout {
					min-height: ${minHeight}vh;
				}
			`)
			myStyle.appendChild(styleTextNode)
			document.head.appendChild(myStyle)
		}
	}
}
</script>
<style lang="scss">
@import './assets/css/reset.css';
@import './assets/scss/app';
</style>
<style lang="scss" scoped>
#app {
  .page-loading {
    font-size: 24px;
    text-align: center;
    padding-top: 130px;
  }
  .page-subpage {
    width: 100%;
		min-width: 1420px;
    height: 100%;
  }
  .page-all {
		min-width: 1420px;
    height: 100%;
    position: relative;
    padding-bottom: 70px;
    background: #f7f8fa;

    .app-header {
      box-sizing: border-box;
      width: 100%;
			min-width: 1420px;
      height: 60px;
      line-height: 60px;
      background: #fff;
      margin-bottom: 20px;
      // padding: 0 40px;
      padding: 0 20px;
      color: #000;
      position: relative;
      overflow-y: hidden;
      // &:after {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   z-index: 222;
      //   background-color: #fff;
      // }
    }

    .main {
      width: 100%;
			min-width: 1420px;
      height: calc(100% - 100px);
      box-sizing: border-box;
      background: #f7f8fa;
      // min-height: 740px;
      // padding-bottom: 20px;
      margin-bottom: 20px;
      display: flex;
      ::v-deep .side-nav, .left-nav {
        border-radius: 6px 6px 0px 0px;
        background: #fff;
        width: 200px;
      }
      .content {
        margin-left: 20px;
        height: 100%;
        overflow-y: auto;
        overflow-x: auto;
        width: calc(100% - 230px);
				min-width: 1200px;
        margin-right: 10px;
        background: #fff;
        position: relative;
        .csl-watermark {
          position: absolute;
          height: 100%;
          width: 100%;
          z-index: 9999;
          pointer-events: none;
        }
      }
    }
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      height: 70px;
      line-height: 70px;
      padding: 0 40px;
      text-align: right;
      background: #fff;
      box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,0.12);
    }
  }
  .only-main-page {
    padding: 20px 0;
    .main {
      display: block;
      margin: 0 20px;
      width: calc(100% - 40px);
      height: 100%;
      .content {
        margin: 0;
        width: 100%;
      }
    }
  }
}
</style>
